<template>
  <div>
    <div style="margin-top: 30px">
      <van-image
          round
          width="10rem"
          height="10rem"
          src="https://img0.baidu.com/it/u=3722752191,690244527&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      />
    </div>
    <div>
      <van-tabs v-model:active="active">
        <van-tab title="账号密码登录">
          <div>
            <van-cell-group inset>
              <van-field
                  v-model="user1.name"
                  label="用户名"
                  placeholder="用户名/手机号"
                  :rules="[{ required: true, message: '请填写用户名或手机号' }]"
              />
              <van-field
                  v-model="user1.password"
                  type="password"
                  label="密码"
                  placeholder="密码"
                  :rules="[{ required: true, message: '请填写密码' }]"
              />
            </van-cell-group>
            <div style="margin: 16px;">
              <van-button round block type="primary" @click="loginName()">
                登录
              </van-button>
            </div>
          </div>
        </van-tab>
        <van-tab title="短信验证码登录">
          <div>
            <!-- 可以使用 CellGroup 作为容器 -->
            <van-cell-group inset>
              <van-field v-model="user2.name" label="手机号：" placeholder="手机号" @change="checkPhone()"/>
              <van-field
                  v-model="user2.password"
                  center
                  clearable
                  label="短信验证码"
                  placeholder="请输入短信验证码"
              >
                <template #button>
                  <van-button size="small" type="primary" :disabled="btn1" @click="sendCode()">{{ this.sendcode }}</van-button>
                </template>
              </van-field>
              <div style=".margin: 16px;">
                <van-button round block type="success" @click="loginCode()">
                  登录
                </van-button>
              </div>
            </van-cell-group>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div>
      <van-row>
        <van-col span="6">
          <router-link to="/register">注册账号</router-link>
        </van-col>
        <van-col span="12"></van-col>
        <van-col span="6">
          <router-link to="/findPass">忘记密码</router-link>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginView",
  mounted() {
    window.location.loaded
  },
  data(){
    return{
      sendcode:"发送验证码",
      codetime:60,
      active:0,
      btn1:true,
      user1:{//账号密码
        name:"",
        password:"",
        city: "郑州",
        mobie: "华为"
      },
      user2:{//手机号验证码
        name:"",
        password:"",
        city: "郑州",
        mobie: "小米"
      },
    }
  },
  methods:{
    loginName(){
      //账号密码登录
      this.axios.post("/user/loginbyname.do",this.user1).then((r)=>{
        if(r.data.code==200){
          console.log(r.data.data)
          this.$store.commit("setToken",r.data.data);
          console.log(this.$store.state.token)
          //成功 跳转到首页
          this.$router.push("/first");
        }else {
          console.log(r.data)
          this.$toast(r.data.msg);
        }
      })
    },
    checkPhone(){
      //校验手机号是否存在
      this.axios.get("/user/checkphone.do?phone="+this.user2.name).then((r)=>{
        if(r.data.code==200){
          //存在  可以发送验证码
          this.btn1=false;
        }else {
          this.btn1=true;
          this.$toast("亲,您的手机号还没注册呢");
        }
      })
    },
    sendCode(){
      //发送验证码
      this.axios.get("/sms/sendLoginCode.do?phone="+this.user2.name).then((r)=>{
        if(r.data.code==200){
          //存在  可以发送验证码
          this.btn1=true;
          this.$toast("亲,验证码发送成功,请查看手机!");
          if(this.codetime>0){
            this.codetime -= 1;
            this.sendcode = this.codetime+" S"
          }else{
            this.btn1 = false;
            this.sendcode = '发送验证码';
            this.codetime = 60
            clearInterval(t)
          }
        }else {
          this.btn1=false;
          this.$toast("亲,验证码发送失败");
        }
      })
    },
    loginCode(){
      //验证码登录
      this.axios.post("/user/loginbyphone.do",this.user2).then((r)=>{
        if(r.data.code==200){
          this.$store.commit("setToken",r.data.data);
          //成功 跳转到首页
          this.$router.push("/home");
        }else {
          console.log(r.data)
          this.$toast(r.data.msg);
        }
      })
    }
  }
}
</script>

<style scoped>

</style>